<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>7. api | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/72.5b235fbd.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>玩转 Angular</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Cycle.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>D3.js 和 Tree</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Three.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>BOX2D.js 文档与教程</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html" class="sidebar-link">1. 基本概念</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/2-0-world.html" class="sidebar-link">2. 物理世界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html" class="sidebar-link">3. 形状 shape - 刚体 body</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html" class="sidebar-link">4. 关节 joint</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/5-0-operation.html" class="sidebar-link">5. 操作 operation</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-1-create-and-init-world.html" class="sidebar-link">6-1. 创建世界并初始化</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-2-add-body.html" class="sidebar-link">6-2. 添加刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-3-add-bound.html" class="sidebar-link">6-3. 添加边界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-4-mouse-operate-body.html" class="sidebar-link">6-4. 鼠标操作刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-5-handle-contact.html" class="sidebar-link">6-5. 处理碰撞刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html" class="active sidebar-link">7. api</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html#box2d-api" class="sidebar-link">Box2D api</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html#common" class="sidebar-link">common</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html#collisions" class="sidebar-link">collisions</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html#dynamics" class="sidebar-link">dynamics</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>第七章主要介绍 api。</p> <h2 id="box2d-api"><a href="#box2d-api" aria-hidden="true" class="header-anchor">#</a> Box2D api</h2> <h3 id="box2d-分类"><a href="#box2d-分类" aria-hidden="true" class="header-anchor">#</a> Box2D 分类</h3> <p>Box2D 所有的 api 可参照<a href="http://www.kyucon.com/doc/box2d/" target="_blank" rel="noopener noreferrer">Box2D_api<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p> <p>可发现，Box2D 具体分为三大类：</p> <ul><li>碰撞类(collision)：碰撞模块定义了形状，broad-phase 算法，碰撞的功能/查询</li> <li>基础类(common)：包括基础系统配置、数据类型、基础数学运算</li> <li>动力学类(dynamics)：包括模拟物理世界，刚体(body)，接触管理(contacts)，以及关节(joint)</li></ul> <p>具体的说明是个人整理的，有些参照网上资源，可能不完整且有偏差。</p> <h2 id="common"><a href="#common" aria-hidden="true" class="header-anchor">#</a> common</h2> <h3 id="math"><a href="#math" aria-hidden="true" class="header-anchor">#</a> math</h3> <ul><li><code>b2Vec2</code>：二维向量</li> <li><code>b2Mat22</code>：一个由两个 b2Vec2 组成的 2*2 方阵，可直接由两个 b2Vec2（col1、col2）构造或者由一个角度值构造</li> <li><code>b2Math</code>：基本数学运算，如向量和矩阵的计算、产生随机数等</li></ul> <h3 id="bssettings"><a href="#bssettings" aria-hidden="true" class="header-anchor">#</a> bsSettings</h3> <ul><li><code>bsSettings</code>：基础系统配置，如 pi 的值、每秒的时间、每米的大小、睡眠时间等等</li></ul> <h2 id="collisions"><a href="#collisions" aria-hidden="true" class="header-anchor">#</a> collisions</h2> <h3 id="shapes-形状定义"><a href="#shapes-形状定义" aria-hidden="true" class="header-anchor">#</a> shapes 形状定义</h3> <ul><li><p><code>b2ShapeDef</code>：形状定义</p> <ul><li>b2ShapeDef 为形状定义</li> <li>type 来表示形状类型</li> <li>localPosition 来表示当前位置</li> <li>localRotation 来表示当前角度</li> <li>friction、density、restitution 来表示摩擦力、密度、弹性系数</li> <li>categoryBits 和 maskBits 来表示碰撞位及位标识（可以用来过滤一些碰撞）</li> <li>groupIndex 来表示组号，这个组号可以用来过滤还比位标识优先</li></ul></li> <li><p><code>b2CircleDef</code>：圆形</p> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_circleShape</li> <li>带有一个类型为 float32 的量 radius 来表示半径值</li></ul></li> <li><p><code>b2BoxDef</code>：矩形</p> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_ boxShape</li> <li>带有一个类型为 b2Vec2 的量 extents 来表示区域值</li></ul></li> <li><p><code>b2PolyDef</code>：凸多边形</p> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_ polyShape</li> <li>带有一个类型为 b2Vec2 的数组 vertices 来表示顶点</li> <li>带有一个 int32 型的量 vertexCount 来表示顶点数，目前顶点数最多支持 8 个</li></ul></li></ul> <h3 id="碰撞的功能-查询"><a href="#碰撞的功能-查询" aria-hidden="true" class="header-anchor">#</a> 碰撞的功能/查询</h3> <ul><li><p><code>b2AABB</code>：AABB 坐标</p> <ul><li>盒子，由两个向量组成，一个为 minVertex 是最小顶点，另一个为 maxVertex 是最大顶点，通过这两个顶点来表示最为普通的 AABB 框</li></ul></li> <li><p><code>b2OBB</code>：OBB 坐标</p></li> <li><p><code>b2ContactID</code>：接触 ID</p></li> <li><p><code>b2ContactPoint</code>：接触点</p></li></ul> <h3 id="broad-phase-算法"><a href="#broad-phase-算法" aria-hidden="true" class="header-anchor">#</a> broad-phase 算法</h3> <ul><li><code>b2BroadPhase</code>：通过使用动态树降低了管理数据方面的开销，极大的降低了调用 narrow-phase 算法的次数</li></ul> <h2 id="dynamics"><a href="#dynamics" aria-hidden="true" class="header-anchor">#</a> dynamics</h2> <h3 id="刚体"><a href="#刚体" aria-hidden="true" class="header-anchor">#</a> 刚体</h3> <ul><li><p><code>b2BodyDef</code>：</p> <ul><li>刚体定义结构</li> <li>userData 来表示用户数据</li> <li>shapes 来表示形状队列，目前形状数最大支持 64 个</li> <li>position 来表示当前位置</li> <li>rotation 来表示当前角度</li> <li>linearVelocity 表示线速度</li> <li>angularVelocity 来表示角速度</li> <li>linearDamping 来表示线性阻尼</li> <li>angularDamping 来表示角阻抗</li> <li>allowSleep 来表示是否可以允许休眠</li> <li>isSleeping 来表示是否正在休眠</li> <li>preventRotation 来表示是否防止旋转</li> <li>支持方法：AddShape(b2ShapeDef* shape)</li></ul></li> <li><p><code>b2CollisionFilters</code>：</p> <ul><li>碰撞过滤是用来防止形状与形状之间进行碰撞的，可以用碰撞种类和组名来区别</li> <li>Box2D 总共提供 16 种碰撞种类，每个形状都可以提定属于什么种类，那么它就可以和其他不同种类的形状碰撞</li></ul></li></ul> <h3 id="结点-joints"><a href="#结点-joints" aria-hidden="true" class="header-anchor">#</a> 结点(joints)</h3> <ul><li><code>b2DistanceJoint</code>：距离连接</li> <li><code>b2DistanceJointDef</code>：距离连接定义</li> <li><code>b2GearJoint</code>：齿轮连接</li> <li><code>b2GearJointDef</code>：齿轮连接定义</li> <li><code>b2Joint</code>：连接基类</li> <li><code>b2JointDef</code>：连接定义基类</li> <li><code>b2JointEdge</code>：用于组合刚体或连接到一起.刚体相当于节点,而连接相当于边</li> <li><code>b2MouseJoint</code>：鼠标连接</li> <li><code>b2MouseJointDef</code>：鼠标连接定义</li> <li><code>b2PrismaticJoint</code>：移动连接</li> <li><code>b2PrismaticJointDef</code>：移动连接定义</li> <li><code>b2PulleyJoint</code>：滑轮连接</li> <li><code>b2PulleyJointDef</code>：滑轮连接定义</li> <li><code>b2RevoluteJoint</code>：旋转连接</li> <li><code>b2RevoluteJointDef</code>：旋转连接定义</li></ul> <h3 id="接触管理-contacts"><a href="#接触管理-contacts" aria-hidden="true" class="header-anchor">#</a> 接触管理(contacts)</h3> <ul><li><code>b2Contact</code>：管理两个外形接触</li> <li><code>b2ContactEdge</code>：接触边用来连接多个物体和接触到一个接触表(物体是一个节点而接触相当于一个接触边)</li> <li><code>b2ContactResult</code>：记录接触结果</li></ul></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-others/box2d-tutorial/7-0-api.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-others/box2d-tutorial/6-5-handle-contact.html" class="prev">
          6-5. 处理碰撞刚体
        </a></span> <!----></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-5828" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/72.5b235fbd.js" defer></script>
  </body>
</html>
